{% extends 'happy_shop/user_profile.html' %}

{% block title %}收货地址管理 - {{ title }}{% endblock %}

{% block breadcrumb_content %}
<b-breadcrumb align="is-left">
    <b-breadcrumb-item tag='a' href="{% url 'happy_shop:index' %}" >首页</b-breadcrumb-item>
    <b-breadcrumb-item tag='a' href="{% url 'happy_shop:user_profile' %}">个人中心</b-breadcrumb-item>
    <b-breadcrumb-item tag='a' active>我的地址</b-breadcrumb-item>
</b-breadcrumb>
{% endblock %}

{% block menmber %}

<div class="block mb-5">
    <div class="is-pulled-left">
        <h1 class="is-size-4">
            <span class="icon"><i class="mdi mdi-map-marker-multiple-outline"></i></span>
            我的地址
        </h1>
    </div>
    <div class="is-pulled-right">
        <button class=" button is-primary is-light" @click="isAddrModalActive = true">
            <span class="icon"><i class="mdi mdi-map-plus"></i></span>
            <span>添加地址</span>
        </button>
    </div>
    <div class="is-clearfix"></div>
    <div class=" dropdown-divider"></div>
</div>

<div class="columns is-multiline">
    {% for addr in address %}
    <div class="column is-6">
        <div class="card is-shadowless" style="border: solid 1px #eee;">
            <div class="card-content">
                {% if addr.is_default %}
                <span class="tag is-primary">默认</span>
                {% endif %}
                {{ addr.name }} {{ addr.phone }}
                <p class="has-text-grey-light mt-2">
                    {{ addr.province }}{{ addr.city }}{{ addr.county }}{{ addr.address }}
                </p>
            </div>
            <footer class="card-footer">
                {% if not addr.is_default %}
                <p class="card-footer-item">
                    <span>
                        <a @click="addrPatch({{addr.id}})">
                            <span class="icon"><i class="mdi mdi-map-marker-check-outline"></i></span>
                            设为默认</a>
                    </span>
                </p>
                {% endif %}
                <p class="card-footer-item">
                    <span>
                        <a @click="addrUpdate({{addr.id}})">
                            <span class="icon"><i class="mdi mdi-archive-edit-outline"></i></span>
                            修改
                        </a>
                    </span>
                </p>
                <p class="card-footer-item">
                    <span>
                        <a @click="addrDelete({{addr.id}})">
                            <span class="icon"><i class="mdi mdi-trash-can-outline"></i></span>
                            删除
                        </a>
                    </span>
                </p>
            </footer>
        </div>
    </div>
    {% endfor %}
</div>

{% include 'happy_shop/addr_form_modal.html' %}
{% endblock %}